<template>
  <div class="size-full">
    <ChromePicker v-model="color" />
    <div class="demo-image__lazy mt-20px">
      <div v-for="url in urls" :key="url">
        <Image :key="url" :src="url" lazy />
      </div>
    </div>
    <button @click="visible = true">{{ visible }}</button>
    <ImagePreview :url-list="urls" v-model:visible="visible" />
  </div>
</template>

<script setup lang="ts">
import { defuWithArrayOverride, getContrastTextColor } from '@m-design/shared/utils';
import { useReactive } from '@m-design/shared/hooks';
import { ChromePicker } from 'vue-color';
import 'vue-color/style.css';
import { ref, watchEffect } from 'vue';
import { Image, ImagePreview } from '@m-design/ui';

console.log('home');

const target = {
  a: [1, 2],
};

const sources = {
  a: [3],
};

const color = ref('#68CCCA');

// const fits = ['fill', 'contain', 'cover', 'none', 'scale-down'] as const;

// const url = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg';

const urls = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
];

const visible = ref(false);

watchEffect(() => {
  console.log(color.value);
  console.log(getContrastTextColor(color.value));
});

const newObj = defuWithArrayOverride(sources, target);

const [state] = useReactive({ a: 1, b: '111' });

console.log('state', state);

console.log('newObj', newObj);
</script>

<style lang="scss" scoped>
.demo-image__lazy {
  height: 400px;
  overflow-y: auto;
}

.demo-image__lazy .m-image {
  display: block;
  min-height: 200px;
  margin-bottom: 10px;
}

.demo-image__lazy .image:last-child {
  margin-bottom: 0;
}
</style>
